<template>
  <div class="Game">
    <div class="camp">目前行动:{{camp?'黑方':'红方'}}</div>
    <div class="board">
      <!-- 遍历成棋盘 -->
      <!-- 渲染所要的行数 -->
      <div v-for="(row,index) in ROW"
           :key="row"
           class="row">
        <!-- 渲染所要的列数       -->
        <div class="block chess"
             :id="getid(index,i)+''"
             v-for="(col,i) in COL"
             :key="col"
             @mouseover="hover(getid(index,i))"
             @mouseout="out(getid(index,i))"
             @click="action(getid(index,i))">

        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from '@vue/runtime-core'
import { ChessInterface } from '../chesses/Chess'
// 引入行和列
import { COL, ROW } from '../config/config'
import { camps } from '../llb/game'
import { GEBI } from '../util/utll'
// 定义一个map 用于得到里面的棋子
const map: Map<number, ChessInterface> = new Map()
// 可以得到棋子所在的位置
const getid = (row: number, col: number) => (ROW - row - 1) * COL + col + 1
// 阵营 作用 如果数字0 那么红方行动 反之黑方行动
let camp = ref(0)
// 滑动进入的棋子
let hoverChess: ChessInterface
// 定义一个是否在选中状态的变量
let isPocus = ref(false)
// 正在被选中的棋子
let focusChess = ref<ChessInterface>()

const action = (position: number) => {
  // 1,没有棋子被选中
  if (!isPocus.value) {
    // 1.1 当前没有一个正在滑动选中的一枚棋子
    if (!hoverChess) return
    // 正打算选中棋子不等于目前阵营的值
    if (hoverChess.camp !== camp.value) return
    // 聚焦状态变成了true
    isPocus.value = true
    focusChess.value = hoverChess
    // 2已有棋子被选中 移动棋子 并结束选中状态
  } else {
    // 把选中状态设为取消
    isPocus.value = false
    // 如果当前选中的这枚棋子 它的可移动的范围中包含了我们选中的位置
    // 同时没有吃到自己的棋子 才会改变行动阵营
    if (
      focusChess.value!.canMove().includes(position) &&
      moveChess(focusChess.value as ChessInterface, position)
    ) {
      // 移动棋子
      // 2.2 改变行动阵营
      camp.value = camp.value ? 0 : 1
    }
  }
}

// 移动方法 参数chess 移动的棋子 to 到哪里
const moveChess = (chess: ChessInterface, to: number): boolean => {
  // 无法吃掉同阵营的棋子
  if (map.get(to)?.camp === camp.value) return false
  // 1.1首先 删除选中的棋子初始位置
  map.delete(chess.position)
  // 添加棋子的移动
  chess.move(to)

  // 2.需要到达的位置
  map.set(to, chess)
  return true
}
// 初始化我们的棋子的方法
const initMap = () => {
  // 地图的加载 先循环出来的camps
  for (const [k, camp] of Object.entries(camps)) {
    // 我们camp有一个get方法 可以返回所有的棋子的数组 在遍历这个数组
    camp.get().forEach((chess) => {
      // 获取位置的id 把文本改成chess自己的name
      GEBI(`${chess.position}`)!.innerText = chess.name
      // 棋子的样式 根据自己阵营的来选择样式
      GEBI(`${chess.position}`)!.classList.add(chess.camp ? 'camp1' : 'camp0')
      // 把我们的棋子的(位置(key):本身(value))保存起来
      map.set(chess.position, chess)
    })
  }
}
// 定义一个划入格子的方法 参数 位置
const hover = (position: number) => {
  // 判断划入的格子是否有棋子
  if (!map.has(position)) return
  hoverChess = map.get(position) as ChessInterface
  // 遍历棋子所移动的区域
  hoverChess!.canMove().forEach((posi) => {
    // 可移动的格子添加动画
    GEBI(posi + '')?.classList.add('moviable')
  })
}
// 定义一个移出格子的方法 参数 位置
const out = (position: number) => {
  // 判断划入的格子是否有棋子
  if (!map.has(position)) return
  // 遍历棋子所移动的区域
  hoverChess!.canMove().forEach((posi) => {
    // 可移动的格子移除动画
    GEBI(posi + '')?.classList.remove('moviable')
  })
}
// 页面完成加载中 调用initMao方法
onMounted(initMap)
</script>

<style scoped lang="scss">
.camp {
  position: absolute;
  top: 0;
  left: 0;
}
// 红方阵营
.camp0 {
  background-color: #ec7357 !important;
}
// 黑方阵营
.camp1 {
  background-color: #383a3f !important;
}
//定义一个动画时间戳
@keyframes fade {
  0% {
    background-color: rgba(pink, 0.4);
  }
  50% {
    background-color: rgba(pink, 1);
  }
  100% {
    background-color: rgba(pink, 0.4);
  }
}
// 定义一个动画
.moviable {
  background-color: pink;
  animation: fade 2s;
  animation-iteration-count: infinite;
}
.chess {
  color: wheat;
  // 文本不可选中
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  width: 50px;
  height: 50px;
  border: 1px solid skyblue;
  &:hover {
    background-color: skyblue;
  }
}
.row {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>